<template>
    <div class="goods_wrap">
        <div class="header">{{ computedCurrentGoods.goodsName }}</div>
        <el-radio-group v-model="isDistribute" @change="changeType" size="large" class="my_radio_group" style="width: 100%;">
            <el-radio-button label="未分" value="0" style="width: 50%;"/>
            <el-radio-button label="已分" value="1" style="width: 50%;"/>
        </el-radio-group>

        <div  class="goods_list_wrap" ref="goodsListWrapRef">
            <!-- {{ unDistributeCurrentPageNo }} -->
            <div v-show="isDistribute == '0'" class="list">
                <div v-for="(item,index) in currentUnDistributeGoodsList" v-show="unDistributeCurrentPageNo==item.pageNo"  :class="{active:currentActiveGoodsIndex==index}" @click="changeGoods(index)">
                    
                    <div >{{ item.goodsName }}</div>
                </div>
            </div>
            <div v-show="isDistribute == '1'" class="list">
                <div v-for="(item,index) in currentDistributeGoodsList" v-show="distributeCurrentPageNo==item.pageNo" :class="{active:currentActiveGoodsIndex==index}" @click="changeGoods(index)">
                    <div  >{{ item.goodsName }}</div>
                </div>
            </div>
            
        </div>
    


        <!--分页-->
        <div class="page" v-show="isDistribute == '0' && currentUnDistributeGoodsList.length>pageSize">
            <el-button size="large" plain @click="prev" :disabled="unDistributeCurrentPageNo<=0">上一页</el-button>
            <el-button size="large" plain @click="next" :disabled="unDistributeCurrentPageNo>=Math.floor(currentUnDistributeGoodsList.length/pageSize)">下一页</el-button>
        </div>
        <div class="page" v-show="isDistribute == '1' && currentDistributeGoodsList.length>pageSize">
            <el-button size="large" plain @click="prev" :disabled="distributeCurrentPageNo<=0">上一页</el-button>
            <el-button size="large" plain @click="next" :disabled="distributeCurrentPageNo>=Math.floor(currentDistributeGoodsList.length/pageSize)">下一页</el-button>
        </div>
        <!--分组-->
        <div class="group_list" v-show="isDistribute=='0'">
            <div v-for="(_, key, index) in unDistributegGroupObj">
                <el-button type="primary" @click="changeGroupActive(key, index)" plain class="group_btn"
                    :class="currentUnDistributeGroupIndex == index ? 'active' : ''">{{ key }}</el-button>
            </div>

        </div>
        <div class="group_list" v-show="isDistribute=='1'">
            <div v-for="(_, key, index) in distributegGroupObj">
                <el-button type="primary" @click="changeGroupActive(key, index)" plain class="group_btn"
                    :class="currentDistributeGroupIndex == index ? 'active' : ''">{{ key }}</el-button>
            </div>

        </div>
    </div>
    <!-- {{ groupList }} -->
</template>
<script setup lang='ts'>
// @ts-nocheck
import { watch, ref, onMounted,computed } from 'vue'
const emit = defineEmits(['changeGoods'])
const props = defineProps<{
    goodsList: [],
    activeGoodsIndex:number
}>();
const isDistribute = ref('0')
const pageSize = ref(30)  //临时写死
const unDistributegGroupObj = ref({}) //未分 分组Object
const distributegGroupObj = ref({}) //已分 分组Object
let unDistributeCurrentPageNo = ref(0) //未分当前页码
let distributeCurrentPageNo = ref(0) //已分当前页码
const currentUnDistributeGoodsList = ref([]) //未分商品当前显示的商品列表
const currentDistributeGoodsList = ref([])//已分商品当前显示的商品列表
const currentUnDistributeGroupIndex = ref(0) //当前未分 选中的分组索引
const currentDistributeGroupIndex = ref(0) //当前已分 选中的分组索引


const currentActiveGoodsIndex = ref(-1)
//当前已选商品索引


const goodsListWrapRef = ref()
onMounted(()=>{
    currentActiveGoodsIndex.value =  props.activeGoodsIndex 
    console.log(11)
    console.log(goodsListWrapRef.value.offsetHeight)
    const goodsListWrapHeight = goodsListWrapRef.value.offsetHeight - 8 //8是padding
    const singleDivHeight = 54
    pageSize.value = Math.floor(goodsListWrapHeight / singleDivHeight) * 3 
    console.log(pageSize.value)
})
/*
    按分组名称分组 {"炸货":[],"熏":[],...},并添加 "全部"
*/
function groupByGroupName(list) {
    let obj = {}
    for (let item of list) {
        if (!obj[item.goodsGroupName]) {
            obj[item.goodsGroupName] = []
        }
        obj[item.goodsGroupName].push(item)
    }
    obj['全部'] = list
    return obj
}

watch(() => props.goodsList, (newData) => {
    if (newData) {
        // console.log(newData)
        console.log(goodsListWrapRef.value?.style)
        for (let item of newData) {
            if (item.isDistribution == 'y') { //已分、未分
               currentDistributeGoodsList.value.push(item)
            } else {
                currentUnDistributeGoodsList.value.push(item)
            }
        }

        //获得分组后的对象 ，并将当前索引设为最后一位（全部）
        unDistributegGroupObj.value = groupByGroupName(currentUnDistributeGoodsList.value)
        distributegGroupObj.value = groupByGroupName(currentDistributeGoodsList.value)
        currentUnDistributeGroupIndex.value = Object.keys(unDistributegGroupObj.value).length - 1
        currentDistributeGroupIndex.value = Object.keys(distributegGroupObj.value).length - 1
        currentUnDistributeGoodsList.value = unDistributegGroupObj.value['全部']
        currentDistributeGoodsList.value = distributegGroupObj.value['全部']
        //添加分页
       
        addPageNo(currentUnDistributeGoodsList.value,pageSize.value) 
        addPageNo(currentDistributeGoodsList.value,pageSize.value)
        console.log(currentDistributeGoodsList.value)
        console.log(currentUnDistributeGoodsList.value)

    }
}, { immediate: true });

//切换分组显示当前商品列表
function changeGroupActive(key, index) {
    if(isDistribute.value=='0'){
        currentUnDistributeGroupIndex.value = index
        currentUnDistributeGoodsList.value = unDistributegGroupObj.value[key]

    }else{
        currentDistributeGroupIndex.value = index
        currentDistributeGoodsList.value = distributegGroupObj.value[key]
    }
    
}

//切换商品
function changeGoods(index){
    currentActiveGoodsIndex.value=index
    emit('changeGoods',{index,item:computedCurrentGoods.value})
}


//添加分页页码 每页size 条
function addPageNo(list,size){
    for(let i=0;i<list.length;i++){
        list[i].pageNo = Math.floor(i/size)
    }
}

//上一页
function prev(){
    if(isDistribute.value ==='0'){//未分
        if(unDistributeCurrentPageNo.value<=0)return
        unDistributeCurrentPageNo.value--
    }else{
        if(distributeCurrentPageNo.value<=0)return
        distributeCurrentPageNo.value--
    }
    
}
//下一页
function next(){
    if(isDistribute.value ==='0'){//未分
        if(Math.floor(currentUnDistributeGoodsList.value.length/pageSize.value) <=unDistributeCurrentPageNo.value)return
        unDistributeCurrentPageNo.value++
    }else{
        if(Math.floor(currentDistributeGoodsList.value.length/pageSize.value) <= distributeCurrentPageNo.value)return 
        distributeCurrentPageNo.value++
    }
    
}

//切换已分、未分
function changeType(){
    //重置选中索引
    currentActiveGoodsIndex.value = -1
}

//当前已选商品
const computedCurrentGoods = computed(()=>{
    if(currentActiveGoodsIndex.value===-1){
        return {goodsName:'生产入仓'}
    }
    if(isDistribute.value==='0'){
        return currentUnDistributeGoodsList.value[currentActiveGoodsIndex.value]
    }else{
        return currentDistributeGoodsList.value[currentActiveGoodsIndex.value]
    }
})
</script>
<style scoped lang='scss'>
.goods_wrap {
    
    //background-color: rgb(226, 166, 69);
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .header {
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    .goods_list_wrap{
        height: calc(100% - 40px - 40px - 50px - 144px);
        padding: 4px 0 4px 4px;
        box-sizing: border-box;
        .list{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            &>div{
                margin: 2px;
                height: 50px;
                border: 1px solid #ccc;
                padding: 2px;
                    box-sizing: border-box;
                    
                    border-radius: 4px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    cursor: pointer;
                    &.active{
                        background-color: var(--el-color-primary);
                        color: #fff;
                        font-weight: bold;
                    }
                &>div{
                    display: -webkit-box;
                    -webkit-line-clamp: 2; /* 控制显示的行数 */
                    -webkit-box-orient: vertical;  
                    overflow: hidden;
                    text-overflow: ellipsis;
                   
                   
                }
            }
        }
    }
    .page{   
        padding: 5px;
    }
    .my_radio_group{
        width: 100%;
        :deep(.el-radio-button__inner){
            width: 100%;
        }
    }

    .group_list {
        display: grid;
        // grid-template-rows: auto;
        grid-template-columns: repeat(3, 1fr);
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;

        &>div {
            margin: 4px;
            height: 40px;

            .group_btn {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                padding: 0;
                font-size: 13px;
                
                &.active {
                    background-color: var(--el-color-primary);
                    color: #fff;
                    // font-weight: bold;
                }
            }
        }
    }
}
</style>
